<template>
  <div class="home-header">
    <div class="home-header-select">
      <a-select
        dropdownClassName="chart-select-drop"
        style="width: 200px; margin-right: 12px"
        v-model:value="selectPlan"
        :options="selectOptions"
        @update:value="changeOptions"
      />
      <a-select
        dropdownClassName="chart-select-drop"
        style="width: 200px"
        v-model:value="selectPeriod"
        :options="timeRangeOptions"
        @update:value="changeOptions"
      />
    </div>
    <div class="home-header-title">大数据校园舆情监测预警系统</div>
    <div class="home-header-time">
      <span class="date-value">{{ date }}</span>
      <span class="time-value">{{ time }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { timeRangeOptions } from '@/config';
const props = defineProps({
  plan: {
    type: String,
    required: true
  },
  selectOptions: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['initScreen']);

const selectPlan = ref<number | string | null>(null);
const selectPeriod = ref<number | string | null>('15d');

const timer = ref<any>(null);
const time = ref<string>('--');
const date = ref<string>('--');

const getTime = () => {
  time.value = dayjs().format('dddd HH:mm:ss');
  date.value = dayjs().format('YYYY/MM/DD');
};

const changeOptions = () => {
  emit('initScreen', {
    planId: selectPlan.value,
    period: selectPeriod.value
  });
};

onMounted(() => {
  selectPlan.value = props.plan;
  getTime();
  timer.value = setInterval(() => {
    getTime();
  }, 1000);
});

onBeforeUnmount(() => {
  clearInterval(timer.value);
});
</script>

<style lang="scss" scoped>
.home-header {
  position: relative;
  height: 65px;
  padding-top: 3px;
  text-align: center;
  background: url('@/assets/images/home-header.png') no-repeat;
  background-size: 100% 100%;

  &-title {
    font-size: 26px;
    font-weight: bold;
    color: #ffffff;

    // text-shadow: 0 0 0.5rem #0a54ea;
  }

  &-time {
    font-size: 18px;
    color: rgb(255 255 255 / 70%);

    .time-value {
      position: absolute;
      top: 30px;
      right: 30px;
    }

    .date-value {
      position: absolute;
      top: 30px;
      right: 170px;
    }
  }

  &-select {
    position: absolute;
    left: 16px;
    top: 30px;
    :deep(.ant-select-selector) {
      background-color: transparent;
      border-color: #009eff;
      .ant-select-selection-item {
        text-align: left;
        color: rgb(255 255 255 / 80%);
        border-color: rgb(255 255 255 / 80%);
      }
      .ant-select-selection-item-remove {
        color: rgb(255 255 255 / 80%);
      }
    }

    :deep(.ant-select-arrow .anticon) {
      color: #ffffff;
    }
    &:hover {
      :deep(.ant-select-selector) {
        border-color: #4992ff;
      }
    }
  }
}

@media (max-width: 600px) {
  .home-header {
    height: 70px;

    &-time {
      font-size: 24px;

      .date-value {
        position: absolute;
        top: 30px;
        right: unset;
        left: 70px;
      }
    }
  }
}

@media (max-width: 450px) {
  .home-header {
    height: 80px;
    padding-top: 4px;
  }
}
</style>
<style lang="scss">
.chart-select-drop {
  color: rgb(255 255 255 / 60%);
  background-color: #3a59a4;

  .ant-select-item {
    color: rgb(255 255 255 / 60%);
  }

  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background-color: #4992ff;
  }

  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background-color: #6585d2;
  }

  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
    color: rgb(255 255 255 / 60%);
  }
}
</style>
